
import cashData from '../utils/treeCashData'
import { buildTree } from '../utils/faltToTree'
import detailList from '../utils/detailList'
import * as echarts from 'echarts'
interface copyCashDataItem {
  level: number;
  label: {
 backgroundColor: string;
 padding?: number[];
  fontSize?: number }; collapsed: boolean 
}
//展示详情
const flagDetail = detailList.reduce((arr:string[],val)=>{
  arr.push(val.name)
  return arr
},[])
// 获取各的层子节点的名称
const getThreeNodeList = (num:number)=>{  
 return cashData.reduce((arr:Array<string>,val)=>{  
    if(val.level === num){
      arr.push(val.name)
    }
    return arr
  },[])
}
// 去除属性的函数
function removeProperties(node: any) {
  let propertiesToRemove = ['level', 'id', 'pid', 'size', 'x', 'y'];
  if (node && typeof node === 'object') {
    // 遍历节点的属性
    for (var prop in node) {
      if (node.hasOwnProperty(prop)) {
        // 如果属性不在要移除的列表中，则保留
        if (!propertiesToRemove.includes(prop)) {
          // 递归处理子节点
          removeProperties(node[prop]);
        } else {
          // 如果属性在列表中，则删除该属性
          delete node[prop];
        }
      }
    }
  }
}
//初始化数据 
let newCashData:any = [];
const init = ()=>{
  let copyCashData = JSON.parse(JSON.stringify(cashData))
  let deleteNum = copyCashData.map((val: copyCashDataItem) => {  
    if(val.level === 1){
      val.label = {
          backgroundColor:'#6C69FF',
          padding: [10,18],
          fontSize:30
      }
      val.collapsed = false
    }else if(val.level === 2){
      val.label = {
          backgroundColor:'#E983C9 '
      }
      val.collapsed = false
    }
    else if(val.level === 3){
      val.label = {
          backgroundColor:'#A983E9'
      }
      val.collapsed = true
    }else{
      val.label = {
          backgroundColor:'#75a7fa'
      }
      val.collapsed = true
    }
    return val
  })
 newCashData = buildTree(deleteNum);
removeProperties(newCashData)
}
init()
export default {
  backgroundColor: "#02246d",
  tooltip: {
    trigger: "item",
    triggerOn:'click',
    formatter: function(params:{name:string}){
      const ids = document.getElementById("chart2") as HTMLElement
      const myecharts = echarts.init(ids)
      const flag = getThreeNodeList(3).includes(params.name)
      if(flag){
         ids.style.width = 1900 + 'px'
      }
      myecharts.resize()
      if(!flagDetail.includes(params.name)) return;
      return `<div>${detailList.filter(val=> val.name === params.name)[0].detail}</div>`
    },
     extraCssText:'width:500px; white-space:pre-wrap'
  },
  toolbox: {
    show:false,
    feature: {
      dataZoom: {
        yAxisIndex: false
      },
      restore: {},
      saveAsImage: {}
    }
  },
  series: [
    {
      type: "tree",
      name: "",
      data: newCashData,
      layout: 'tree', // or 'force'
      // top: "-50%",
      left: "10%",
      roam: true,
      symbolKeepAspect: true,
      label: {
          position: "center",
          verticalAlign: "middle",
          borderRadius: 4,
          align: "center",
          padding: [6,8],
          shadowColor: 'rgba(0, 0, 0, 0.5)', // 设置阴影颜色
          shadowBlur: 3, // 添加整个 label 区域的阴影效果
          backgroundColor: "#108ffe",
          color: "#fff",
          formatter:function(params:{name?:string}){
          let labelname = params.name.replace(/\d/g, '')
          return `{a|${labelname}}{b|${flagDetail.includes(params.name) ? '📋' : ""}}`
          },
          rich: {
            a: {
              fontSize: 20,
              color: "#fff",
              align: "center",
              lineHeight: 23    
            },
            b:{
              fontSize: 20,
              color: '#ff7800',
              padding: [0, 5, 0, 5], // 调整图标的点击区域
              onclick: function () {
                // 点击图标时触发的事件
                console.log(1111);  
              }
              
            }
          },
      },
      leaves: {
        // label: {
        //   borderRadius: 4,
        //   normal: {
        //     position: "center",
        //     verticalAlign: "middle",
        //     align: "left",
        //     // backgroundColor: "#c44eff",
        //     formatter: ["{box|{b}}"].join("\n"),
        //     rich: {
        //       box: {
        //         color: "#fff",
        //         padding: [2, 2],
        //         align: "center",
        //       },
        //     },
        //   },
        // },
      },
      emphasis: {
        focus: 'relative'
      },
      // expandAndCollapse: true,
      animationDuration: 400,
      animationDurationUpdate: 450,
      lineStyle: {
        color: '#c6c6c6', // 设置节点之间连线的颜色
        width: 2 // 设置节点之间连线的宽度
      }
    },
  ],
}
